<template>
  <todoInput @addTodo="addTodo" />
  <todoList :todoList="todoList" />
  <todoBtn @changeList="changeList" />
</template>
<script >
import todoBtn from "./views/todoBtn.vue";
import todoInput from "./views/todoInput.vue";
import todoList from "./views/todoList.vue";
export default {
  data() {
    return {
      todoList: [
        { id: 1, todoName: "吃饭", isCompleted: true },
        { id: 2, todoName: "睡觉", isCompleted: true },
        { id: 3, todoName: "玩游戏", isCompleted: false },
      ],
      active: 0,
    };
  },
  computed: {
    todoList() {
      if (this.active === 0) {
        return this.todoList;
      } else if (this.active === 1) {
        return this.todoList.filter((item) => {
          return item.isCompleted;
        });
      } else {
        return this.todoList.filter((item) => {
          return !item.isCompleted;
        });
      }
    },
  },
  components: {
    todoList,
    todoBtn,
    todoInput,
  },
  methods: {
    changeList(active) {
      this.active = active;
    },
    addTodo(todoName) {
      this.todoList.push({
        id: todoList.length + 1,
        todoName: todoName,
        isCompleted: false,
      });
    },
  },
};
</script>

<style scoped>
</style>
